<template>
    <div>
         <div class="message_info" style="position: relative;">
            <div class="message_title">
              <img src="../assets/images/right_arrow.png" />
              <span>三公经费</span>
            </div>
            <div class="message_content" id="sangongAmount" style="height:280px;margin-top:-20px">
           
            </div>
             
            <!-- '#0FE589','#CCA240','#31AAF5' -->
          
          
           
            <div
              style="width:100px;height:100px;border-radius:50%;position: absolute;color: #eee ;top:134px;left:39%;text-align: center;"
            >
              <div style="font-size:13px;">今年累计</div>
              <div style="font-size:10px;">
                <span style="font-size:30px;font-weight:bold;color:rgba(200,200,82,1);">{{totalForWan}}</span>万元
              </div>
              <div style="font-size:10px;"></div>
              <div style="font-size:16px;color:rgba(60,223,255,1);">{{yearCompare}}</div>
            </div>
          </div>  
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data(){
        return{
          total:'',
          totalForWan:'',
          yearCompare:'',
option:{
 color: ['#0FE589', '#CCA240', '#31AAF5'],
        series: [
          {
            name: '三公经费',
            type: 'pie',
            radius: ['50%', '65%'],
            labelLine: {
              normal: {
                length: 0,  // 改变标示线的长度
                length2: 30,
                lineStyle: {
                  color: "#0A46F2"  // 改变标示线的颜色
                },

              },
              left: 100
            },
            label: {
              show: true,
               fontSize: "16",
            
              formatter: function(params) {
   return  params.name+"\n"+params.percent+"%"
    
},
              rich: {
                b1111: {
                  fontSize: 16,
                  lineHeight: 33,
                  top: 100
                },
                c: {
                  fontSize: 12,
                  lineHeight: 33
                },
              }
            },
            // 选中状态样式
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            data: []
          },
        ]
}
        }
    },
    created() {
        
    },
    mounted() {
         var myChart3 = echarts.init(document.getElementById('sangongAmount')); 
       this.Api.ConsumptionCategory().then((res) => {
      console.log(res,'三公经费');
this.total=res.data.total
this.totalForWan=res.data.totalForWan
this.yearCompare=res.data.yearCompare
  for (var i = 0; i < res.data.classificationList.length; i++) {
      this.option.series[0].data.push({
          value:  res.data.classificationList[i].amount,
          name:  res.data.classificationList[i].feesName,
         
        });
      }

    myChart3.setOption(this.option);
       })
   // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(this.option); 
    },
}
</script>
<style lang="less" scoped>
    .message_info {
      width: 452px;
      margin: 24px 30px;
      height: 295px;


    } 
      .message_title {
      padding: 6px 0;
      width: 100%;
      height: 45px;
      font-size: 28px;
      font-weight: 500;
      color: #06FFFF;
      line-height: 45px;
    }

    .message_title img {
      height: 24px;
      width: 24px;
    }

    .message_content {
      margin-top: 10px;
    }
</style>